import React, {Component} from 'react';
import {Relax} from 'plume2';
import ares from 'ares-mobile';
import {hashHistory} from 'react-router';
import {List, WhiteSpace, Button, AppIcon, WingBlank, Toast, Radio, Flex, Modal} from 'ares-uikit';
@Relax
export default class Compile extends Component<any, any> {
    static relaxProps = {
        editor: 'editor',
        list: "list",
        tplrelease: 'tplrelease',
        useTemplate: () => {
        },
        getTplList: () => {
        },
        clickTplRelease: () => {
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            _disabled: false
        };
        ares.extra.add('logout');
        ares.config({
            jsApiList: [
                'biz.navigation.setTitle',
                'extra.logout',
                'device.notification.confirm',
                'device.notification.alert'
            ]
        });
        ares.ready(() => {
            this.setTitle();
        });
    }

    setBack = () => {
        ares.biz.navigation.onBack({
            onSuccess: function (data) {
                hashHistory.replace({
                    pathname: '/qm-app-xsite/list',
                    state: {selectStatus: 1}
                });
            }
        })
    };

    componentDidMount() {
        // this.logout()
        this.setBack();
        console.log(this.props.relaxProps.tplrelease.release)
    }

    componentWillUnmount() {
        // this.logout()
    }

    setTitle() {
        ares.biz.navigation.setTitle({
            title: '正在使用',
            textColor: '#FFFFFF'
        });
    }

    logout = async () => {
        // this.props.relaxProps.useTemplate().then(
        //     () => {
        //         hashHistory.replace({
        //             pathname: '/qm-app-xsite/list',
        //             state: { selectStatus: 1 }
        //         });
        //         let _index= this.props.relaxProps.editor.get("index");
        //         this.props.relaxProps.getTplList(this.props.relaxProps.editor.get("id"),this.props.relaxProps.editor.get("bannerImage"));
        //         this.setState({ _disabled: true });
        //         Toast.hide();
        //     },
        //     err => {
        //         throw err;
        //     }
        // )
        this.props.relaxProps.tplrelease.release ? ares.device.notification.confirm({
            message: '若使用该模板，手机端无法切换回当前模板。如需切换回当前模板，可电脑登录“1000.com”进行修改。',
            title: '', //可传空
            buttonLabels: ['取消', '启用'],
            onSuccess: result => {
                //onSuccess将在点击button之后回调
                if (result.buttonIndex == 1) {
                    this.props.relaxProps.clickTplRelease(false);
                    Toast.loading('启用中...', 0);
                    this.props.relaxProps.useTemplate().then(
                        () => {
                            hashHistory.replace({
                                pathname: '/qm-app-xsite/list',
                                state: {selectStatus: 1}
                            });
                            this.props.relaxProps.getTplList(this.props.relaxProps.editor.get("id"));
                            this.setState({_disabled: true});
                            Toast.hide();
                        },
                        err => {
                            throw err;
                        }
                    );
                }
            },
            onFail: function (err) {
                alert(err);
            }
        }) : (()=> {
            Toast.loading('启用中...', 0);
            this.props.relaxProps.useTemplate().then(
                () => {
                    hashHistory.replace({
                        pathname: '/qm-app-xsite/list',
                        state: {selectStatus: 1}
                    });
                    this.props.relaxProps.getTplList(this.props.relaxProps.editor.get("id"));
                    this.setState({_disabled: true});
                    Toast.hide();
                },
                err => {
                    throw err;
                }
            )
        })()
    };

    render() {
        let {editor, list} = this.props.relaxProps;
        let _index = editor.get("index")
        //let {id} = this.props.params;
        // const item = list.find(item => item.id === id) || {};
        const item = editor.get('tplImage');
        let bannerImage = editor.get('bannerImage') || editor.get('content') || list[_index].content;
        if (editor.get('bannerImage') === "") {
            if (!list[_index].activated) {
                bannerImage = false
            }
        }
        const activated = editor.get('activated');
        const templateId = editor.get('id');
        //const content=editor.get("content");
        let bannerHeight = 3.35;
        if (templateId === 'weixin-newFruit') {
            bannerHeight = 2.35;
        } else if (templateId === 'weixin-newLifeSupplies') {
            bannerHeight = 5.35;
        }

        console.log(item);
        return (
            <div className="compile  page-view">
                <div className="compileBox page-scroll has-footer">
                    <img
                        className="cpmpileTopImage"
                        style={{height: bannerHeight + 'rem', display: bannerImage ? 'block' : 'none'}}
                        src={bannerImage}
                        alt=""
                    />
                    <img
                        className="templateSousuo"
                        style={{display: bannerImage ? 'block' : 'none'}}
                        src="//qianmi-web.oss-cn-hangzhou.aliyuncs.com/x-site/public/x-site-ui-wechat/statics/app-xsite/template-sousuo.png"
                        alt=""
                    />
                    <div
                        className="dottedBox"
                        style={{height: bannerHeight - 0.35 + 'rem', lineHeight: bannerHeight * 2 - 1.8 + 'rem'}}
                        onClick={this.handerClick}
                    >
                        更换
                    </div>
                    <img src={item} alt="" className="compileImg"/>
                </div>

                <Flex className="fix-footer">
                    <Flex.Item>
                        <Button type="primary" across onClick={this.logout}
                                disabled={this.state._disabled}>启用模板</Button>
                    </Flex.Item>
                </Flex>;
            </div>
        );
    }

    handerClick = () => {
        this.props.router.push('/qm-app-xsite/change');
    };
}
